<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Document</title>
    <link rel="icon" type="image/png" sizes="16x16" href="../image/favicon.png">
    <link href="/bootstrap-3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="../layui/css/layui.css" rel="stylesheet">
    <link href="../css/style.css" rel="stylesheet">
    <link href="../css/control/chart.css" rel="stylesheet">
</head>
<body>
<div class="layui-fluid">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="page-header">
                <h1>
                    数据中心
                    <small>大数据分析</small>
                </h1>
            </div>
            <div class="row clearfix">
                <div class="col-md-2 column">
                    <ul class="nav nav-pills nav-stacked">
                        <li style="text-align:center">
                            <a href="/index.html" class="layui-icon layui-icon-home">　返回大屏</a>
                        </li>
                        <li class="active">
                            <a href="#">大数据分析</a>
                        </li>
                        <li>
                            <a href="./con_blackbroad.html">黑广播查询</a>
                        </li>
                        <li>
                            <a href="/new_control/con_mobile.html">工作管理</a>
                        </li>
                        <li>
                            <a href="/new_control/con_setting.html">控制中心</a>
                        </li>
                    </ul>
                </div>
                <div class="col-md-10 column">
                    <div class="tabbable" id="tabs-241950">
                        <ul class="nav nav-tabs">
                            <li class="active">
                                <a href="#panel-759329" data-toggle="tab">时间分布</a>
                            </li>
                            <li>
                                <a href="#panel-212124" data-toggle="tab">空间分布</a>
                            </li>
                            <li>
                                <a href="#panel-212125" data-toggle="tab">内容分布</a>
                            </li>
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane active" id="panel-759329">
                                <div style="padding: 20px; background-color: #F2F2F2;">
                                    <div class="layui-row layui-col-space15">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="layui-card">
                                                    <div class="layui-card-header">每日黑广播统计</div>
                                                    <div class="layui-card-body">
                                                        <div id="chart_all" class="chart"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-4">
                                                <div class="layui-card">
                                                    <div class="layui-card-header">
                                                        <div class="col-md-8">
                                                            年统计(各月份占比)
                                                        </div>
                                                        <div class="col-md-4">
                                                            <button id="year_detil" type="button" class="layui-btn">详细
                                                            </button>
                                                        </div>
                                                    </div>
                                                    <div class="layui-card-body">
                                                        <div id="chart_year" class="chart"></div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="layui-card">
                                                    <div class="layui-card-header">
                                                        <div class="col-md-8">
                                                            月统计(各日期占比)
                                                        </div>
                                                        <div class="col-md-4">
                                                            <button id="month_detil" type="button" class="layui-btn">
                                                                详细
                                                            </button>
                                                        </div>
                                                    </div>
                                                    <div class="layui-card-body">
                                                        <div id="chart_month" class="chart"></div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="layui-card">
                                                    <div class="layui-card-header">
                                                        <div class="col-md-8">
                                                            日统计(各时间段占比)
                                                        </div>
                                                        <div class="col-md-4">
                                                            <button id="day_detil" type="button" class="layui-btn">详细
                                                            </button>
                                                        </div>
                                                    </div>
                                                    <div class="layui-card-body">
                                                        <div id="chart_day" class="chart"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane" id="panel-212124">
                                <div style="padding: 20px; background-color: #F2F2F2;">
                                    <div class="layui-row layui-col-space15">
                                        <div class="col-md-10">
                                            <div class="layui-card">
                                                <div class="layui-card-header">
                                                    <div class="col-md-11">　
                                                        热力图
                                                    </div>
                                                    <div class="col-md-1">
                                                        <button id="sub" type="button" class="layui-btn">提交</button>
                                                    </div>
                                                </div>
                                                <div class="layui-card-body">
                                                    <!------------------------------------------------- 地图 热力图 ------------------------------------>
                                                    <div id='container' class="jumbotron"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-2">
                                            <div class="layui-card">
                                                <div class="layui-card-header">
                                                    <div>时间范围</div>
                                                </div>
                                                <div class="layui-card-body">
                                                    <div id="text1"></div>
                                                    <div id="text2"></div>
                                                    <div style="margin-left: -10px" id="slideTest1"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane" id="panel-212125">
                                <div style="padding: 20px; background-color: #F2F2F2;">
                                    <div class="layui-row layui-col-space15">
                                        <div class="row clearfix">
                                            <div class="col-md-8">
                                                <div class="layui-card">
                                                    <div class="layui-card-header">黑广播种类</div>
                                                    <div style="width: 580px !important;height:480px" class="layui-card-body">
                                                        <div id="chart_category" class="chart_category"></div>
                                                    </div>
                                                </div>
                                            </div>
                                            <!------------------------------- 日期选择器 --------------------------------->
                                            <div class="col-md-4">
                                                <div class="layui-card">
                                                    <div class="layui-card-header">时间选择</div>
                                                    <div class="layui-card-body">
                                                        <form style="height: 480px" class="layui-form" action="">
                                                            <div class="layui-form-item">
                                                                <label style="width: 100px" class="layui-form-label">开始时间</label>
                                                                <div class="layui-input-block">
                                                                    <input type="text" name="s_time" class="layui-input"
                                                                           id="test3" readonly>
                                                                </div>
                                                            </div>
                                                            <div class="layui-form-item">
                                                                <label style="width: 100px" class="layui-form-label">结束时间</label>
                                                                <div class="layui-input-block">
                                                                    <input type="text" name="e_time" class="layui-input"
                                                                           id="test4" readonly>
                                                                </div>
                                                            </div>
                                                            <div class="layui-form-item">
                                                                <div class="layui-input-block">
                                                                    <button class="layui-btn" lay-submit
                                                                            lay-filter="formDemo2">立即提交
                                                                    </button>
                                                                    <button type="reset"
                                                                            class="layui-btn layui-btn-primary">重置
                                                                    </button>
                                                                </div>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!------------------------------- 脚本 -------------------------------------->
<script src="../js/shell/jquery.min.js" type="text/javascript"></script>
<script src="../js/shell/vue.min.js" type="text/javascript"></script>
<!------------------ 地图 ------------------>
<script type="text/javascript"
        src="https://webapi.amap.com/maps?v=1.4.15&key=53d9330efb4cb3ce512a46f93728a097&plugin=Map3D,AMap.DistrictLayer,AMap.Scale,AMap.ToolBar"></script>
<script src="//webapi.amap.com/loca?v=1.3.2&key=53d9330efb4cb3ce512a46f93728a097" type="text/javascript"></script>
<script src="https://a.amap.com/Loca/static/mock/adcodes.js"></script>
<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
<!------------------ axios ----------------->
<script src="../js/shell/axios.min.js" type="text/javascript"></script>
<!------------------ echarts --------------->
<script src='../js/shell/echarts/datazoom.js'></script>
<!------------------ bootstrap ------------->
<script src="../js/shell/bootstrap.min.js" type="text/javascript"></script>
<!------------------ layui ----------------->
<script src="../layui/layui.js" type="text/javascript"></script>
<!------------------------------ 自定义脚本 --------------------------------------------->
<!------------------- 压缩脚本 ------------------>
<!------------------- 地图js -------------------->
<script src="../js/compress/con_data/mainMapShellCompress.js"></script>
<!------------------- 图表js -------------------->
<script src="../js/compress/con_data/mainChartShellCompress.js"></script>
<!-- 源js -->
<!-------------------- 地图js --------------->
<!-- <script src="../js/con_data/mainMapShell.js"></script> -->
<!-------------------- 图表js --------------->
<!-- <script src="../js/con_data/mainChartShell.js"></script> -->
</body>
</html>